<template>
  <div>
    <edu-page-tabs :tab-list="xTabs" />
    <el-form label-width="200px" size="mini">
      <el-form-item label="机构名称">
        <span>{{ response.school_name }}</span>
      </el-form-item>
      <el-form-item label="课程名称">
        <span>{{ response.course_title }}</span>
      </el-form-item>
      <el-form-item label="课时名称">
        <span>{{ response.title }}</span>
      </el-form-item>
      <el-form-item label="讲师名">
        <span>{{ response.teacher_name }}</span>
      </el-form-item>
      <el-form-item label="课时类型">
        <span>{{ response.data_type_text }}</span>
      </el-form-item>
      <el-form-item label="课时资源预览">
        <el-button @click="preview = true">{{ previewText[response.data_type] }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="disableSubmit" @click="pass">通过</el-button>
        <el-button @click="reasonBoxVisible = true">驳回</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="reasonBoxVisible" width="32%" title="驳回原因" :close-on-click-modal="false">
      <edu-textarea :value.sync="reason" :args="{ maxlength: 200, word_limit: 1, rows: 4, placeholder: '输入驳回原因' }" />
      <el-row type="flex" align="middle" justify="center" class="reason-btns">
        <el-button size="small" plain @click="reasonBoxVisible = false">取消</el-button>
        <el-button size="small" type="primary" :disabled="disableSubmit" @click="reject">驳回</el-button>
      </el-row>
    </el-dialog>
    <el-dialog v-if="response.data_type == 1" width="54%" :visible.sync="preview" title="视频-课时预览" :close-on-click-modal="false">
      <edu-video :file="courseData" :preview="preview" />
    </el-dialog>
    <el-dialog v-if="response.data_type == 2" width="54%" :visible.sync="preview" title="音频-课时预览" :close-on-click-modal="false">
      <edu-audio :file="courseData" :preview="preview" />
    </el-dialog>
    <el-dialog v-if="response.data_type == 3" width="54%" :visible.sync="preview" title="图文-课时预览" :close-on-click-modal="false">
      <div v-html="response.course_data.data_txt" />
    </el-dialog>
    <el-dialog v-if="response.data_type == 4 && response.course_data.extension == 'pdf'" width="54%" :visible.sync="preview" title="PDF-课时预览" :close-on-click-modal="false">
      <edu-pdf :file="courseData" :preview="preview" />
    </el-dialog>
    <el-dialog v-if="response.data_type == 4 && response.course_data.extension == 'epub'" width="54%" :visible.sync="preview" title="EPUB-课时预览" :close-on-click-modal="false">
      <edu-epub :file="courseData" :preview="preview" />
    </el-dialog>
  </div>
</template>

<script>
import EduPageTabs from '@public/template/tabs/page_tabs.vue';
import EduTextarea from '@public/form/textarea.vue';
import EduVideo from './components/video.vue';
import EduAudio from './components/audio.vue';
import EduPdf from './components/pdf.vue';
import EduEpub from './components/epub.vue';

export default {
  components: {
    EduPageTabs,
    EduTextarea,
    EduVideo,
    EduAudio,
    EduPdf,
    EduEpub
  },
  inject: ['reload'],
  data() {
    return {
      disableSubmit: false,
      reasonBoxVisible: false,
      preview: false,
      reason: '',
      response: {},
      previewText: { 1: '观看视频', 2: '播放音频', 3: '预览图文', 4: '预览电子书' },
      xTabs: [
        {
          title: '点播列表',
          uri: '/course/video/list',
          meta: {
            permission: 'course.video.default'
          }
        },
        {
          title: '课时审核',
          uri: '/course/video/examine/list',
          meta: {
            permission: 'course.video.examine.list'
          }
        },
        {
          title: '审核详情',
          uri: '/course/video/examine/' + this.$route.params.id + '/handle',
          meta: {
            permission: 'course.video.examine.handle'
          }
        }
      ]
    };
  },
  computed: {
    courseData() {
      return this.response.course_data ? { ...this.response.course_data, cover_url: this.response.cover_url } : {};
    }
  },
  created() {
    this.$http.get(
      '/course/admin/video/examine/' + this.$route.params.id + '/handle',
      {},
      response => {
        this.response = response.data;
      },
      _ => {
        this.$message.error('请求出错');
      }
    );
  },
  methods: {
    pass: function() {
      this.disableSubmit = true;
      this.$box
        .confirm('通过课时审核', '审核确认')
        .then(() => {
          this.$http.post(
            '/course/admin/video/examine/' + this.$route.params.id + '/handle',
            {
              status: 1
            },
            response => {
              this.$message.success(response.msg, _ => {
                this.$router.push({ path: '/course/video/examine/list' });
              });
            },
            error => {
              this.disableSubmit = false;
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {
          this.disableSubmit = false;
        });
    },
    reject: function() {
      if (!this.reason) {
        this.$message.warning('请填写驳回原因');
        return false;
      }
      this.disableSubmit = true;
      this.$http.post(
        '/course/admin/video/examine/' + this.$route.params.id + '/handle',
        {
          status: 0,
          reason: this.reason
        },
        response => {
          this.$message.success(response.msg, _ => {
            this.$router.push({ path: '/course/video/examine/list' });
          });
        },
        error => {
          this.disableSubmit = false;
          this.$message.error(error.msg);
        }
      );
    }
  }
};
</script>
<style type="text/css">
img {
  max-width: 600px;
  max-height: 600px;
}
</style>
<style lang="scss" scoped>
.image-preview-info {
  font-size: 12px;
}
.image-preview {
  width: 128px;
  height: 128px;
  margin-top: 10px;
  ::v-deep.el-image {
    width: 100%;
    height: 100%;
  }
  ::v-deep.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
  }
}
::v-deep.el-form-item__label {
  color: #909399;
}

.reason-btns {
  margin-top: 20px;
}
</style>
